<template>
  <div v-bind="$attrs">
    <div ref="contentRef"></div>
  </div>
</template>
<script lang="ts" setup>
import {ref, onMounted, watch} from 'vue'
import Player from 'xgplayer'
import 'xgplayer/dist/index.min.css'

const props = defineProps({
  url: String
})

const contentRef = ref()

const player = ref<Player>()

onMounted(() => {
  player.value = new Player({
    el: contentRef.value,
    url: props.url,
    height: '100%',
    width: '100%',
  })
})

watch(() => props.url, () => {
  if (player.value) {
    player.value.setConfig({
      url: props.url
    })
    player.value.reload()
  }
})

</script>
